*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.container{
    width: 520px;
    height: 320px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.container .content{
    width: 100%;
    height: 280px;
    /* overflow: hidden; */
}
.container .content ul{
    width: 1040px;
    height: 280px;
}
.container .content li{
    width: 520px;
    height: 280px;
    position: absolute;
}
.container .content li img{
    width: 520px;
    height: 280px;
}

.ctl{
    width: 100%;
    height: 40px;
}
.ctl .prev{
    background: rgba(255,255,255,0.5) url(left.png);
    position: absolute;
    width: 32px;   
    height: 32px;
    top: 130px;

}
.ctl .next{
    background: rgba(255,255,255,0.5) url(right.png);
    position: absolute;
    width: 32px;   
    height: 32px;
    top: 130px;
    right: 0;
}
.ctl .icon-wraper{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 40px;
    overflow: hidden;

}

.ctl .icon-wraper .icon{
    width: 30px;
    height: 10px;
    background-color: rgb(156, 150, 150);
    margin: 10px;
    text-indent: 50em;

}
.ctl .icon-wraper .icon.selected{
    background-color: rgb(24, 2, 146);
}